Skip to content

feat(canvas): add AI gateway built-in template#2773

Draft
richardsolomou wants to merge 3 commits into
mainfrom
posthog-code/ai-gateway-canvas-template
Draft

feat(canvas): add AI gateway built-in template#2773
richardsolomou wants to merge 3 commits into
mainfrom
posthog-code/ai-gateway-canvas-template

Conversation

@richardsolomou

@richardsolomou richardsolomou commented Jun 19, 2026

Copy link
Copy Markdown
Member

Problem

New agents-platform frontend work belongs in PostHog Code, not the Cloud frontend. The AI gateway usage page shipped as a Cloud kea scene (PostHog/posthog#64511); this is the canvas-native equivalent.

Changes

  • New ai-gateway declarative built-in (KPI Stats, spend-per-day chart, by-model table, connect-snippet switch, empty-state Hero), mirroring the web-analytics template.
  • Enrols ai-gateway in DATA_TEMPLATES so the board gets the date picker and toolbar refresh.
  • Gateway base URL is a <placeholder> (Code has no preflight to source it); rationale and open question in AI_GATEWAY.md.

How did you test this?

vitest run src/canvas/ (6 files, 53 tests), core typecheck, biome lint, all green. New canvasTemplates.test.ts asserts the prompt bakes the exact filter, formulas, and date placeholders. Have not driven the live agent.

Automatic notifications

  • Publish to changelog?
  • Alert Sales and Marketing teams?

Created with PostHog Code

Ports the Cloud AI gateway usage page (PostHog/posthog#64511) to a canvas
as a declarative built-in, mirroring the web-analytics template. The board
reuses existing catalog components and the state.queries refresh machinery,
so the only host wiring is enrolling "ai-gateway" in DATA_TEMPLATES for the
date picker and toolbar refresh.

Generated-By: PostHog Code
Task-Id: 1e07b596-b3fb-4d08-a836-282ef28620f0
@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown

React Doctor found no issues in the changed files. 🎉

Reviewed by React Doctor for commit 7f15695.

@greptile-apps

greptile-apps Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor
Prompt To Fix All With AI
Fix the following 3 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 3
packages/ui/src/features/canvas/components/WebsiteLayout.tsx:45
**Parallel registry that can drift from `BUILT_INS`**

`DATA_TEMPLATES` is a second, hand-maintained list that must stay in sync with `canvasTemplates.ts`'s `BUILT_INS`. The PR's own `AI_GATEWAY.md` notes this: "That's a parallel list to the core template registry — worth collapsing into a `dataTemplate` flag on the template record so the two can't drift." A future data-driven template will require the same two-file update in different packages, and there is nothing to catch it if one side is missed. Adding a `dataTemplate?: boolean` field to `BuiltInTemplate` and deriving this list from the registry would remove the duplication.

### Issue 2 of 3
packages/core/src/canvas/canvasTemplates.test.ts:44-50
The "connect snippets" test bundles four independent `toContain` assertions in one non-parameterised `it`. The formula test just above it already uses `it.each` for exactly this pattern, and the team preference is parameterised tests throughout. Applying the same shape here keeps the test suite consistent and gives a descriptive failure message per assertion.

```suggestion
  it.each([
    ["OpenAI base URL", "baseURL: '<gateway base URL>/v1'"],
    ["Anthropic SDK import", "@anthropic-ai/sdk"],
    ["provider state path", '"$state": "/provider"'],
    ["language state path", '"$state": "/language"'],
  ])("bakes the %s into the connect section", (_name, snippet) => {
    expect(aiGateway?.systemPrompt).toContain(snippet);
  });
```

### Issue 3 of 3
packages/core/src/canvas/canvasTemplates.ts:150-155
**Fragile string surgery on `GATEWAY_WHERE`**

The empty-state probe query is constructed by calling `.replace()` twice on `GATEWAY_WHERE`. If the constant is ever restructured (e.g. the placeholder renamed, or the `AND timestamp < {date_to}` clause moved), the replacement silently produces wrong SQL with no compile-time or test-time signal. No existing test asserts the assembled empty-state query text. A named constant — `const GATEWAY_EMPTY_STATE_WHERE = \`${GATEWAY_BASE_FILTER} AND timestamp >= now() - INTERVAL 30 DAY\`` — next to `GATEWAY_WHERE` would be self-documenting and immune to structural drift.

Reviews (1): Last reviewed commit: "feat(canvas): add AI gateway built-in te..." | Re-trigger Greptile

Comment thread packages/ui/src/features/canvas/components/WebsiteLayout.tsx Outdated
Comment thread packages/core/src/canvas/canvasTemplates.test.ts Outdated
Comment thread packages/core/src/canvas/canvasTemplates.ts Outdated
Address review feedback on the AI gateway template:
- Add a `dataTemplate` flag to the template registry and derive
  `DATA_TEMPLATE_IDS` from it, so the UI no longer hand-maintains a
  parallel list that can drift from `BUILT_INS`.
- Extract `GATEWAY_BASE_FILTER` and compose both `GATEWAY_WHERE` and a
  named `GATEWAY_EMPTY_STATE_WHERE` from it, replacing the fragile
  double `.replace()` on the empty-state probe.
- Parameterise the connect-snippets test and add a test pinning the
  empty-state probe SQL.

Generated-By: PostHog Code
Task-Id: 4cbc0700-22e3-4c7d-9f9d-330d3d1338bf
Main re-platformed canvas data boards (dashboard, web-analytics) from the
json-render tier onto the React/Quill freeform tier and removed the data
toolbar. Re-platform the AI gateway template to match: a React-tier
FREEFORM_AI_GATEWAY_RULES prompt wired into FREEFORM_SYSTEM_PROMPTS, plus a
selectable AI_GATEWAY_TEMPLATE in BUILT_IN_TEMPLATES, replacing the
json-render BUILT_INS entry. The gateway-filter invariant, metric formulas,
SDK snippets, and build-time empty-state probe carry over; queries now use
inline HogQL with the date control's half-open window. WebsiteLayout takes
main's version (no data toolbar). Test and AI_GATEWAY.md updated for the
React tier.

Generated-By: PostHog Code
Task-Id: 4cbc0700-22e3-4c7d-9f9d-330d3d1338bf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant